<script setup lang="ts">
import { ref, computed } from 'vue';
import { NProgress } from 'naive-ui';

defineOptions({ name: 'AiAnalysis' });

// 模拟系统健康数据
const healthScore = ref(96.8);
const trend = ref('up'); // up, down, same

// 详细指标
const indicators = ref([
  { name: 'CPU使用率', value: '65%', threshold: 80, status: 'normal' },
  { name: 'GPU使用率', value: '78%', threshold: 85, status: 'warning' },
  { name: '内存使用率', value: '62%', threshold: 80, status: 'normal' },
  { name: '磁盘空间', value: '45%', threshold: 90, status: 'normal' },
  { name: '模型推理成功率', value: '99.2%', threshold: 95, status: 'success' },
  { name: '响应时间', value: '120ms', threshold: 200, status: 'success' }
]);

// 计算健康状态
const healthStatus = computed(() => {
  if (healthScore.value >= 90) return 'success';
  if (healthScore.value >= 75) return 'warning';
  return 'error';
});

// 计算趋势图标
const trendIcon = computed(() => {
  if (trend.value === 'up') return 'mdi-arrow-up';
  if (trend.value === 'down') return 'mdi-arrow-down';
  return 'mdi-minus';
});

// 计算趋势颜色
const trendColor = computed(() => {
  if (trend.value === 'up') return 'text-success';
  if (trend.value === 'down') return 'text-danger';
  return 'text-gray-500';
});
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <div class="flex flex-col md:flex-row gap-8">
      <div class="flex-1 flex flex-col items-center justify-center p-6 bg-primary/5 rounded-lg">
        <h3 class="text-xl font-semibold mb-4">系统健康指数</h3>
        <div class="flex items-end gap-2 mb-2">
          <span :class="`text-4xl font-bold text-${healthStatus}`">{{ healthScore }}%</span>
          <span :class="trendColor"><SvgIcon :icon="trendIcon" /></span>
        </div>
        <NProgress :percentage="healthScore" :status="healthStatus" class="w-full" />
        <p class="mt-4 text-center text-gray-500">
          较昨日 {{ trend === 'up' ? '上升' : trend === 'down' ? '下降' : '持平' }} 1.2%
        </p>
      </div>

      <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div v-for="indicator in indicators" :key="indicator.name" class="p-4 bg-gray-50 rounded-lg">
          <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium">{{ indicator.name }}</span>
            <span :class="{
              'text-success': indicator.status === 'success',
              'text-warning': indicator.status === 'warning',
              'text-danger': indicator.status === 'error',
              'text-gray-600': indicator.status === 'normal'
            }">
              {{ indicator.value }}
            </span>
          </div>
          <NProgress
            :percentage="parseInt(indicator.value)"
            :status="indicator.status === 'success' ? 'success' : indicator.status === 'warning' ? 'warning' : 'error'"
            class="w-full"
          />
        </div>
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>